<!--
 * @Author: your name
 * @Date: 2021-10-12 10:20:01
 * @LastEditTime: 2021-11-05 14:41:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jingfeng-web\src\components\popovers\popovers.vue
-->
<template>
  <div class="popovers">
    <el-popover placement="bottom-start" width="152" trigger="click">
      <el-checkbox-group
        v-model="columnSelectedArr"
        class="checkGroup"
        :min="min"
        @change="popoverChange"
        :placement="placement"
      >
        <el-checkbox v-for="item in columnHeadersArr" :label="item.title" :key="item.title"></el-checkbox>
      </el-checkbox-group>
      <el-button slot="reference" type="primary" class="create_btn">字段管理</el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
    name: 'popovers',
    props: {
        columnSelecteds: {
            type: Array,
            default: () => []
        },
        columnHeaders: {
            type: Array,
            default: () => []
        },
        min: {
            type: Number,
            default: () => 3
        },
        placement: {
            type: String,
            default: () => 'bottom-start'
        }
    },
    computed: {
    // groupArr: function() {
    //     return this.columnSelecteds
    // },
    // headersArr: function() {
    //     return this.columnHeaders
    // },
    // groupArr: {
    //     get: function() {
    //         return this.columnSelecteds
    //     },
    //     set: function(val) {
    //         this.changeValue(val)
    //     }
    // }
    },
    data() {
        return {
            columnSelectedArr: this.columnSelecteds,
            columnHeadersArr: this.columnHeaders
        }
    },
    mounted() {
        console.log('groupArr', this.groupArr)
    },
    methods: {
        changeValue(v) {
            this.columnSelecteds = v
        },
        popoverChange(v) {
            this.$emit('selchange', v)
        }
    },
    watch: {
        columnSelecteds(newV, oldV) {
            // watch监听props里status的变化，然后执行操作
            console.log(newV, oldV)
            this.columnSelectedArr = newV
        },
        columnHeaders(newV, oldV) {
            // watch监听props里status的变化，然后执行操作
            console.log(newV, oldV)
            this.columnHeadersArr = newV
        }
    }
}
</script>

<style scoped lang="less">
.checkGroup {
  max-height: 500px;
  overflow: auto;
  .checkItem {
    display: block;
  }
}
</style>
